/*
 * @Author: 曹澳龙
 * @Date: 2023-08-02 14:19:24
 * @LastEditTime: 2023-08-02 14:19:24
 * @LastEditors: 曹澳龙
 * @Description:
 *
 */

import {Component} from "react";
import Header from "./header";
import List from "./list";
import Footer from "./footer";

class TodoList extends Component<any, any> {

    state={
        todos:[
            {id: 1, name: "吃饭", done: true},
            {id: 2, name: "睡觉", done: false},
            {id: 3, name: "打代码", done: true},
        ]
    }

    addTodo = (todo: object) => {
        const {todos} = this.state;
        this.setState({
            todos: [todo, ...todos]
        })
    }

    deleteTodo = (id: any) => {
        const {todos} = this.state;
        this.setState({
            todos: todos.filter(todo => todo.id !== id)
        })
    }

    changeTodo = (id: any, done: boolean) => {
        const {todos} = this.state;
        this.setState({
            todos: todos.map((todo: any) => todo.id === id ? {...todo, done} : todo)
        });
    }

    checkAllTodo = (_done: boolean) => {
        const {todos} = this.state;
        this.setState({
            todos: todos.map((todo: any) => { return {...todo, done: _done}})
        });
    }

    clearAllDone = () => {
        const {todos} = this.state;
        this.setState({
            todos: todos.filter((todo: any) => !todo.done)
        });
    }

    render() {

        const {todos} = this.state

        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.changeTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                </div>
            </div>
        );
    }
}

export default TodoList;